<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给你的诗歌</title>
    <style type="text/css">
        body{
            background-image: url(./images/0.jpg);
            background-size: 100% 100%;
            height:100%;
        }
        html{
            height:100%;
        }
        @keyframes myfirst {
            0% {opacity:0}
            25% {opacity:100}
            50% {opacity:0}
            100% {opacity:0}
        }
        @keyframes mysecond{
            0% {opacity:0}
            50% {opacity:0}
            75% {opacity:100}
            100% {opacity:0}
        }
        p{
            font-size: 100px;
            position: absolute;
            width:100%;
            text-align: center;
        }
        #canghai{
            animation: myfirst 7.47s infinite;
        }
        #taotao{
            animation: mysecond 7.47s infinite;
        }
    </style>
    <script>
        function audioAutoPlay(id){
            var audio = document.getElementById(id);
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
            document.addEventListener('YixinJSBridgeReady', function() {
                audio.play();
            }, false);
        }
    </script>
</head>
<body onload="audioAutoPlay('bgm');">
<audio id="bgm" src="wav/bgm.wav" preload="auto" autoplay="autoplay"></audio>
<p id="canghai">沧海笑</p>
<p id="taotao">滔滔两岸潮</p>

</body>
</html>